<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>areaManager</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../commons/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!-- 加载bootstrap-select -->
    <link href="../commons/bootstrap-select-1.13.9-dist/css/bootstrap-select.min.css" rel="stylesheet">
    <!-- 加载bootstrap-treeview -->
    <link href="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../commons/css/currency.css">


    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">CIMS-校园即时通讯系统</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="./areaIndex">首页</a></li>
                <li class=""><a href="./areaManager">院校管理</a></li>
                <li class=""><a href="./areaAdminManager">院校管理员管理</a></li>
            </ul>
            <ul class="nav navbar-nav" style="float: right">
                <li class=""><a id="loginUser_nav"></a></li>
                <li class=""><a id="logout_nav">注销</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="page-header">
        <h3 style="align-content: center">CIMS-校园即时通讯系统</h3>
    </div>

    <div class="container">
        <h3 class="page-header">院校管理</h3>
        <div class="row">
            <div class="col-sm-3">
                <div class="text-center">
                    <button class="btn btn-sm btn-primary" type="button" id="add_area_btn" disabled><span
                            class="glyphicon glyphicon-plus"></span> 添加
                    </button>
                    <button class="btn btn-sm btn-danger" type="button" id="delete_area_btn" disabled><span
                            class="glyphicon glyphicon-remove"></span> 删除
                    </button>
                </div>
                <div id="area_tree" style="margin-top: 10px"></div>
            </div>
            <div class="col-sm-9 ">
                <!-- 添加 -->
                <div id="add_area_div" style="display: none">
                    <h4 class="page-header" style="margin: 10px 0 10px">添加院校</h4>
                    <div class="row">
                        <form class="form-horizontal" role="form" id="add_area_frm">
                            <div class="form-group">
                                <label for="areaParentName_add_input" class="col-sm-3 control-label">父节点</label>
                                <div class="col-sm-9 controls">
                                    <input type="text" value="" class="form-control" id="areaParentName_add_input"
                                           disabled />
                                    <input type="hidden" value="" name="areaParentId" id="areaParentId_add_input" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="areaName_add_input" class="col-sm-3 control-label">名称</label>
                                <div class="col-sm-9 controls">
                                    <input type="text" value="" class="form-control" name="areaName"
                                           id="areaName_add_input" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">类别</label>
                                <div class="col-sm-9 controls">
                                    <select class="selectpicker form-control" name="areaType" title="请选择类型"
                                            id="areaType_add_select" disabled>
                                        <option value>请选择</option>
                                        <option value='1'>省</option>
                                        <option value='2'>市</option>
                                        <option value='3'>院校</option>
                                    </select>
                                    <input type="hidden" value="2" name="areaType" id="areaType_add_input" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">排序号</label>
                                <div class="col-sm-9 controls">
                                    <input type="text" value="" class="form-control" name="areaSortNum"
                                           id="areaSortNumber_add_input" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3"></label>
                                <div class="col-sm-9 controls text-center">
                                    <a class="btn btn-primary" id="submit_add_btn"><span
                                            class="glyphicon glyphicon-save"></span> 添加</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 修改 -->
                <div id="modify_area_div" style="display: none">
                    <h4 class="page-header" style="margin: 10px 0 10px">修改</h4>
                    <div class="row">
                        <form class="form-horizontal" role="form" id="modify_area_frm">
                            <div class="form-group">
                                <label for="areaParentName_modify_input" class="col-sm-3 control-label">父节点</label>
                                <div class="col-sm-9 controls">
                                    <input type="text" value="" class="form-control" id="areaParentName_modify_input"
                                           disabled />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="areaName_modify_input" class="col-sm-3 control-label">名称</label>
                                <div class="col-sm-9 controls">
                                    <input type="text" value="" class="form-control" name="areaName"
                                           id="areaName_modify_input" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">类别</label>
                                <div class="col-sm-9 controls">
                                    <select class="selectpicker form-control" name="areaType" title="请选择类型"
                                            id="areaType_modify_select" disabled>
                                        <option value>请选择</option>
                                        <option value='1'>省</option>
                                        <option value='2'>市</option>
                                        <option value='3'>院校</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">排序号</label>
                                <div class="col-sm-9 controls">
                                    <input type="text" value="" class="form-control" name="areaSortNum"
                                           id="areaSortNumber_modify_input" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3"></label>
                                <div class="col-sm-9 controls text-center">
                                    <a class="btn btn-primary" id="submit_modify_btn"><span
                                            class="glyphicon glyphicon-save"></span> 保存</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<div class="footer ">
    <div class="container">
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li> Campus Instant Messaging System @2020 杭州职业技术学院 软件技术专业</li>
            </ul>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../commons/js/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../commons/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../commons/bootstrap-treeview-1.2.0-dist/bootstrap-treeview.min.js"></script>
<script src="../commons/bootstrap-select-1.13.9-dist/js/bootstrap-select.min.js"></script>
<script src="../commons/js/login.js"></script>

<script>
    // $.fn.loadLoginUser = function () {
    //     $.ajax({
    //         url: "../user/loginUser",
    //         type: "get",
    //         dataType: "json",
    //         success: function (result) {
    //             if (result.code == 100) {
    //                 $("#loginUser_nav").append(result.extend.loginUser.userName);
    //                 if (result.extend.loginUser.userType > 1) {
    //                     var area = "[" + result.extend.loginUser.area.parentArea.parentArea.areaName + ""
    //                         + result.extend.loginUser.area.parentArea.areaName + "" +
    //                         result.extend.loginUser.area.areaName + "]";
    //                     $("#loginUser_nav").append($("<small></small>").append(area));
    //                 }
    //             }
    //         }
    //     })
    // }
    //
    // $.fn.logout = function () {
    //     $.ajax({
    //         url: "../user/logout",
    //         type: "get",
    //         dataType: "json",
    //         success: function (result) {
    //             if (result.code == 100) {
    //                 window.location.href = result.target;
    //             }
    //         }
    //     })
    // }
    // $(function () {
    //     $.fn.loadLoginUser();
    // });
    // $("#logout_nav").click(function () {
    //     $.fn.logout();
    // })
</script>

<script type="text/javascript">
    $(function () {
        loadAreaTree();
    });

    function loadAreaTree() {
        var treeData = [{
            text: "院校配置",
            id: null,
            areaType: 0,
            nodes: []
        }];
        $.ajax({
            url: 'tree',
            dataType: 'json',
            type: 'GET',
            success: function (result) {
                treeData[0].nodes = result.extend.areas;
                $('#area_tree').treeview({
                    data: treeData,
                    levels: 2,
                    onNodeSelected: function (event, node) {
                        $("#add_area_frm")[0].reset();
                        $("#add_area_div").hide();
                        $("#modify_area_frm")[0].reset();
                        $("#modify_area_div").hide();
                        $("#add_area_btn").attr("disabled", "disabled");
                        $("#delete_area_btn").attr("disabled", "disabled");

                        if (node.areaType < 3) {
                            $("#add_area_btn").removeAttr("disabled");
                        }

                        if (node.areaType > 0) {
                            $("#delete_area_btn").removeAttr("disabled");
                            $("#modify_area_div").show();
                            var parentNode = $("#area_tree").treeview("getParent", node);
                            $("#areaParentName_modify_input").val(parentNode.text);
                            $("#areaParentId_modify_input").val(parentNode.id);
                            $("#areaName_modify_input").val(node.text);
                            $("#areaType_modify_select").selectpicker('val', [node.areaType]);
                            $("#areaType_modify_input").val(node.areaType);
                            $("#areaSortNumber_modify_input").val(node.areaSortNum);
                            $("#submit_modify_btn").attr("edit-id", node.id);
                        }
                    },
                    onNodeUnselected: function (event, node) {
                        $("#add_area_frm")[0].reset();
                        $("#add_area_div").hide();
                        $("#modify_area_frm")[0].reset();
                        $("#modify_area_div").hide();

                        $("#add_area_btn").attr("disabled", "disabled");
                        $("#delete_area_btn").attr("disabled", "disabled");
                    }
                });
            }
        });
    }

    $("#add_area_btn").click(function () {
        var nodesSelected=$("#area_tree").treeview("getSelected");
        var count=Object.keys(nodesSelected).length;
        if (count>0) {
            $("#add_area_frm")[0].reset();
            $("#add_area_div").hide();
            $("#modify_area_frm")[0].reset();
            $("#modify_area_div").hide();


            $("#add_area_div").show();
            $("#areaParentName_add_input").val(nodesSelected[0].text);
            $("#areaParentId_add_input").val(nodesSelected[0].id);
            $("#areaType_add_select").selectpicker('val', [nodesSelected[0].areaType + 1]);
            $("#areaType_add_input").val(nodesSelected[0].areaType + 1);
        }
        else {
            alert("请选择要添加的节点")
        }
    })

    $("#submit_add_btn").click(function () {
      //校验数据
      //添加
        $.ajax({
          url:"school",
          data:$("#add_area_frm").serialize(),
          type:"post",
          dataType:"json",
          success:function (result) {
              if (result.code==100){
                  //添加成功，刷新所有地域信息
                  $("#add_area_frm")[0].reset();
                  $("#add_area_div").hide();
                  $("#add_area_btn").attr("disabled", "disabled");
                  $("#delete_area_btn").attr("disabled", "disabled");
                  loadAreaTree();
              }
          }
        })
    })


    $("#submit_modify_btn").click(function () {
        //校验数据
        //修改
        $.ajax({
            url:"school/"+$(this).attr("edit-id"),
            data:$("#modify_area_frm").serialize(),
            type:"put",
            dataType:"json",
            success:function (result) {
                if (result.code==100){
                    //修改成功，刷新所有地域信息
                    $("#modify_area_frm")[0].reset();
                    $("#modify_area_div").hide();
                    $("#add_area_btn").attr("disabled", "disabled");
                    $("#delete_area_btn").attr("disabled", "disabled");
                    $('#area_tree').empty();
                    loadAreaTree();
                }
            }
        })
    })

    $("#delete_area_btn").click(function () {
        //判断是否有地域选中
        var nodeSelected=$("#area_tree").treeview("getSelected");
        if (nodeSelected.length==0){
            alert("请选择需要删除的院校！")
            return
        }
        var delete_id=nodeSelected[0].id;
        //提示删除信息

        //删除
        $.ajax({
            url:"school/"+delete_id,
            type:"delete",
            dataType:"json",
            success:function (result) {
                if (result.code==100){
                    //删除成功，刷新所有地域信息
                    $("#add_area_frm")[0].reset();
                    $("#add_area_div").hide();
                    $("#modify_area_frm")[0].reset();
                    $("#modify_area_div").hide();
                    $("#add_area_btn").attr("disabled", "disabled");
                    $("#delete_area_btn").attr("disabled", "disabled");
                    $('#area_tree').empty();
                    loadAreaTree();
                }
            }
        })
    })

</script>
</body>
</html>

